<template>
  <div>
    <div class="nav">
        <img src="https://static.asus.com.cn/store/20210825/11292351525153.png" alt="" class="img1">
        <div class="center" @click="fun">
            <van-icon name="search" class="icon1"/>
            <input type="text" placeholder="天选3">
        </div>
        <img src="https://static.asus.com.cn/static/wap/app/images/home/button_navibars_2w.png" alt="" class="img2" @click="fun3()">
    </div>
  </div>
</template>

<script>
export default {
    methods: {
        fun() {
            this.$router.push({
                path:"/search"
            }).catch(err=>err)
        },
        fun3() {
            this.$router.push({
                path:"/denglu"
            }).catch(err=>err)
        }
    }
}
</script>

<style lang="scss" scoped>
    .nav{
        width: 100vw;
        height: 11.8VW;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .img1{
            height: 9vw;
        }
        .img2{
            height: 9vw;
        }
        .center{
                background-color: #ccd1db;
            width: 64vw;
            height: 8vw;
            border-radius: 5vw;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .icon1{
                font-size: 5vw;
                color: #8a93a1;
            }
            input{
                width: 55vw;
                border-style: none;
                background-color: #ccd1db;
                color: #8a93a1;
                font-size: 3vw;
            }
        }
    }


</style>
